<div class="wrapper">
    <div>
        <div class="box box-top">
            <!-- /.box-header -->
            <!-- form start -->
            <form id="parameterForm" role="form" action="${base}/svg/operate/parameter/save/" method="post">
                <input type="hidden" name="id" value="${(parameter.id)!}">
                <input type="hidden" name="iconId" value="${(parameter.iconId)!}">
                <input type="hidden" name="templateId" value="${(parameter.templateId)!}">
                <div class="box-body">
                    <#if icon.catagory=='Camera'>
                    <div class="form-group">
                        <label for="cameraHolding">Camera Holding</label>
                        <select class="form-control select2"  id="cameraHolding" name="cameraHolding">
                        <#list cameraHoldingList as obj>
                            <option <#if (obj.value)! == (parameter.cameraHolding)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                        </#list>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="lens">Camera Lens</label>
                        <select class="form-control select2"  id="lens" name="lens">
                        <#list lensList as obj>
                            <option <#if (obj.value)! == (parameter.lens)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                        </#list>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="iso">Camera ISO</label>
                        <select class="form-control select2"  id="iso" name="iso">
                        <#list isoList as obj>
                            <option <#if (obj.value)! == (parameter.iso)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                        </#list>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="aperture">Camera Aperture</label>
                        <select class="form-control select2"  id="aperture" name="aperture">
                        <#list apertureList as obj>
                            <option <#if (obj.value)! == (parameter.aperture)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                        </#list>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="shutter">Camera Shutter</label>
                        <select class="form-control select2"  id="shutter" name="shutter">
                        <#list shutterList as obj>
                            <option <#if (obj.value)! == (parameter.shutter)!> selected="selected"</#if> value="${(obj.value)!}">${(obj.value)!}</option>
                        </#list>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="height">height</label>
                        <input type="text" value="${(parameter.height)!}" class="form-control" name="height" id="height">
                    </div>
                    <div class="form-group">
                        <label for="tiltAngle">tiltAngle</label>
                        <input type="text" value="${(parameter.tiltAngle)!}" class="form-control" name="tiltAngle" id="tiltAngle">
                    </div>
                    </#if>
                    <#if icon.catagory=='Backgrounds'>
                    <div class="form-group">
                        <label for="bgColor">Background Color</label>
                        <input type="text" value="${(parameter.bgColor)!}" class="form-control" name="bgColor" id="bgColor">
                    </div>
                    </#if>
                    <div class="form-group">
                        <label for="memo" style="padding-bottom: 30px;">Note</label>
                        <textarea  class="form-control"  name="memo" id="memo">${(parameter.memo)!}</textarea>
                    </div>
                    <div class="form-group">
                        <label>Photo</label>
                        <div class="row" style="display: inline-block;">

                            <div class="col-md-4" style="display: inline-block;">
                                <input type="file" id="exampleInputFile" multiple="multiple">
                            </div>
                            <div class="col-md-4" style="display: inline-block;">
                                <input type="button" value="upload" onclick="pushImg()">
                            </div>
                        </div>
                        <input type="hidden" id="annex" name="profilePhoto" value="${(parameter.profilePhoto)!''}">
                    </div>
                    <div class="form-group">
                        <label  style="padding-bottom: 30px;"></label>
                        <img src="${base}${(parameter.profilePhoto)!'/fileUpload/placeholder.jpg'}" style="width: 50px;height: 50px;" alt="..." id="titleImage" class="margin">
                    </div>
                    <div class="timeline-body" >

                    </div>
                    <div class="box-footer">
                        <button type="button" onclick="$('#parameterForm').submit();" class="button blue">Save
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        $("#parameterForm").validate({
            submitHandler:function(form){
                submitIcon();
            }
        });
    });
    function submitIcon(){
        utils.HF.ajaxFormSubmit('parameterForm',function(result){
            alert("Save Suncess");
            svgCanvas.list[ svgCanvas.selectedObjectID ].parameterId=result;
            utils.closeDialog();
        },function(e){ alert("Save Failure");});
    }
    function pushImg(obj) {
        var url = '${base}'+ "/svg/rider/titleImgeUpload"; //访问控制器是upload，后面必须加'/'否则会报错"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.
        var files = $("#exampleInputFile").get(0).files[0]; //获取file控件中的内容

        var fd = new FormData();
        fd.append("uploadFile", files);
        $.ajax({
            type: "POST",
            contentType:false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
            processData: false, //必须false才会自动加上正确的Content-Type
            url: url,
            data: fd,
            success: function (msg) {

                var obj = eval('(' + JSON.stringify(msg) + ')');
                if(obj.SUCESS){
                    //填充图片
                    $("#titleImage").attr("src", '${base}'+obj.DATA);
                    $("#titleImage").css("width","150");
                    $("#titleImage").css("height","100");
                    //写入隐藏域
                    $("#annex").val(obj.DATA);
                    alert("upload Success")
                }
            },
            error: function (msg) {
                //debugger;
                alert("error");
            }
        });
    }
</script>
